<template>
  <div>
     <div>
        <el-input size="small" v-model="jl.name" style="width: 300px" prefix-icon="el-icon-plus" 
        placeholder="添加职称..." @keydown.enter.native="addJobLevel">
        </el-input>
        <el-select v-model="jl.titleLevel" placeholder="职称等级" size="small" style="margin-left: 5px;margin-right: 5px">
           <el-option
                   v-for="item in titleLevels"
                   :key="item"
                   :label="item"
                   :value="item">
           </el-option>
        </el-select>
        <el-button icon="el-icon-plus" type="primary" size="small" @click="addJobLevel">添加</el-button>
     </div>
     <div style="margin-top: 10px">
        <el-table
             :data="jls"
             size="small"
             stripe
             @selection-change="handleSelectionChange"
             border
             style="width: 80%">
        <el-table-column
                type="selection"
                width="55">
       </el-table-column>
        <el-table-column
                prop="id"
                label="编号"
                width="55">
        </el-table-column>
        <el-table-column
                prop="name"
                label="职称名称"
                width="150">
        </el-table-column>
        <el-table-column
                prop="titleLevel"
                label="职称级别">
        </el-table-column>
        <el-table-column
                prop="createDate"
                label="创建时间">
        </el-table-column>
        <el-table-column
                label="是否启用">
            <template slot-scope="scope">
                <el-tag type="success" v-if="scope.row.enabled">已启用</el-tag>
                <el-tag type="danger" v-else>未启用</el-tag>
            </template>
        </el-table-column>

        <el-table-column
                laber="操作"
                label="创建时间">
           <template slot-scope="scope">
             <!-- scope.row 这一行对应的json对象 -->
              <el-button size="small" @click="showEditView(scope.row)">编辑</el-button>
              <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
           </template>
        </el-table-column>
      </el-table>
      <el-button
            @click="deleteMany"
            type="danger"
            size="small"
            style="margin-top: 8px"
            :disabled="multipleSelection.length==0">
        批量删除
      </el-button>

     </div>
     <!-- 修改职称的对话框 -->
      <el-dialog
            title="修改职称"
            :visible.sync="dialogVisible"
            width="30%">
        <div>
            <table>
                <tr>
                    <td><el-tag>职称名称</el-tag></td>
                    <td><el-input class="updateJlInput" size="small" v-model="updateJl.name"></el-input></td>
                </tr>
                <tr>
                    <td><el-tag>职称级别</el-tag></td>
                    <td>
                        <el-select size="small" v-model="updateJl.titleLevel" placeholder="职称等级" style="margin-left: 8px;margin-right: 8px">
                            <el-option
                                    v-for="item in titleLevels"
                                    :key="item"
                                    :label="item"
                                    :value="item">
                            </el-option>
                        </el-select>
                    </td>
                </tr>
                <tr>
                    <td><el-tag style="margin-right: 8px">是否启用</el-tag></td>
                    <td>
                        <el-switch
                                v-model="updateJl.enabled"
                                active-text="启用"
                                inactive-text="禁用">
                        </el-switch>
                    </td>
                </tr>
            </table>

        </div>
      <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="dialogVisible = false">取 消</el-button>
      <el-button size="small" type="primary" @click="doUpdate">确 定</el-button>
      </span>
      </el-dialog>

  </div>
</template>

<script>
   export default {
       name: "JobLevelMana",
      data(){
          return{
             jls:[], //表格数据
             jl:{  //添加职称的数据
                name:'',
                titleLevel:''
             },
             updateJl:{  //修改职称的数据
                name: '',
                titleLevel:'',
                enabled: false
             },
             titleLevels:[ //列出职称等级
                     '正高级',
                     '副高级',
                     '中级',
                     '初级',
                     '员级'
             ],
             dialogVisible: false, //是否显示对话框
             multipleSelection:[],  //多选的数据
          }
      },
      mounted() {
        this.initJls(); //进入页面就初始化数据
      },
      methods: {
        //批量删除
        deleteMany(){
            this.$confirm('此操作将永久删除【'+this.multipleSelection.length+'】条记录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let ids = '?';
                //遍历multipleSelection来拼接 
                this.multipleSelection.forEach(item=>{
                    ids += 'ids=' + item.id + '&';
                });
                this.deleteRequest("/system/basic/joblevel/" + ids).then(resp=>{
                    if (resp){
                        this.initJls();
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
          },
        //获取多选条数的值
        handleSelectionChange(val){
            this.multipleSelection = val;
        }, 
        //编辑时回显数据
        showEditView(data){
           Object.assign(this.updateJl,data);
           this.dialogVisible = true;
        },
        //修改职称
        doUpdate(){
           this.putRequest("/system/basic/joblevel/",this.updateJl).then(resp=>{
             if(resp){
                this.initJls();
                this.dialogVisible = false;
             }
           })
        },
        //删除职称
        handleDelete(data){
            this.$confirm('此操作将永久删除【'+data.name+'】, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.deleteRequest("/system/basic/joblevel/"+data.id).then(resp=>{
                    if (resp) {
                        this.initJls();
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
         //添加职称
        addJobLevel(){
            if (this.jl.name && this.jl.titleLevel) {
                this.postRequest("/system/basic/joblevel/", this.jl).then(resp => {
                    if (resp) {
                        this.initJls();
                        this.jl={
                            name:'',
                            titleLevel:''
                        };
                    }
                });

            }else {
                this.$message.error("添加字段不可以为空")
            }
        },
        //初始化表格数据
        initJls(){
          this.getRequest("/system/basic/joblevel/").then(resp=>{
            if(resp){
              //如果有数据，就赋值
              this.jls = resp;
            }
          })

        },

      },
   }
</script>

<style scoped>
 .updateJlInput{
        width: 200px;
        margin-left: 8px;

    }
</style>
